@charset "utf-8";
// lunbotu
#content {
    .inner {
        position: relative;
        z-index: 10;
        width: 1226px;
        margin: 0 auto;
        .lunbotu {
            position: relative;
            height: 460px;
            overflow: hidden;
            ul {
                position: relative;
                width: 100%;
                height: 100%;
                box-sizing: content-box;
                li {
                    float: left;
                    width: 1226px;
                    height: 460px;
                    opacity: 1;
                    a {
                        display: block;
                        img {
                            display: block;
                            width: 1226px;
                            height: 460px;
                        }
                    }
                }
            }
            ol {
                width: 90px;
                position: absolute;
                left: auto;
                right: 30px;
                bottom: 20px;
                z-index: 10;
                transition: opacity 0.3s;
                text-align: right;
                li {
                    float: left;
                    margin: 0 4px;
                    width: 6px;
                    height: 6px;
                    border: 2px solid #fff;
                    border-color: hsla(0, 0%, 100%, .3);
                    border-radius: 10px;
                    overflow: hidden;
                    background: rgba(0, 0, 0, .4);
                    text-align: -9999px;
                    cursor: pointer;
                    &:hover {
                        background: hsla(0, 0%, 100%, .4);
                        border-color: rgba(0, 0, 0, .4)
                    }
                    &.active {
                        background: hsla(0, 0%, 100%, .4);
                        border-color: rgba(0, 0, 0, .4)
                    }
                }
            }
            #left,
            #right {
                display: block;
                width: 41px;
                height: 69px;
                position: absolute;
                top: 50%;
                margin-top: -35px;
                z-index: 10;
                outline: none;
            }
            #left {
                left: 234px;
                background: url(../img/icon-slides.png) no-repeat -84px 50%;
                &:hover {
                    background-position: 0 50%;
                }
            }
            #right {
                right: 0;
                background: url(../img/icon-slides.png) no-repeat -125px 50%;
                &:hover {
                    background-position: -42px 50%;
                }
            }
        }
        .lunbotu-bottom {
            margin: 14px 0 26px -14px;
            .left-1 {
                width: 234px;
                margin-left: 14px;
                ul {
                    padding: 3px;
                    font-size: 12px;
                    text-align: center;
                    background: #5f5750;
                    li {
                        position: relative;
                        float: left;
                        width: 70px;
                        height: 82px;
                        padding: 0 3px;
                        &::before {
                            content: "";
                            width: 64px;
                            height: 1px;
                            background: #665e57;
                            position: absolute;
                            top: -1;
                            left: 6px;
                        }
                        &::after {
                            content: "";
                            width: 1px;
                            height: 70px;
                            background: #665e57;
                            position: absolute;
                            top: 6px;
                            left: 0;
                        }
                        &>a {
                            display: block;
                            padding-top: 18px;
                            text-overflow: ellipsis;
                            color: #fff;
                            opacity: .7;
                            transition: opacity .2s;
                            &:hover {
                                opacity: 1;
                            }
                            img {
                                display: block;
                                width: 24px;
                                height: 24px;
                                margin: 0 auto 4px;
                            }
                        }
                    }
                }
            }
            .right-1 {
                width: 978px;
                margin-left: 14px;
                ul>li {
                    float: left;
                    width: 316px;
                    height: 170px;
                    margin-left: 15px;
                    transition: box-shadow .2s;
                    &:hover {
                        box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
                    }
                    a {
                        display: block;
                        height: 170px;
                        background: url(../img/placeholder-80.png) no-repeat 50%;
                        img {
                            display: block;
                            width: 316px;
                            height: 170px;
                        }
                    }
                }
                ul>li:first-child {
                    margin-left: 0;
                }
            }
        }
    }
}